<template>
    <el-dialog class="dialog" :destroy-on-close="true" :title="title" :visible.sync="isShow" :close-on-click-modal="false"
        @close="onDialogClose">
        <el-form ref="form" label-width="auto" class="form" :model="formData" :rules="rules">
            <el-form-item label="考勤规则" prop="gz_sn">
                <el-select v-model="formData.gz_sn" placeholder="请选择考勤规则" :disabled="isEdit">
                    <el-option v-for="item in gzData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="考勤日期:" prop="day_date">
                <el-date-picker v-model="formData.day_date" type="date" placeholder="请选择考勤日期" value-format="yyyy-MM-dd" :disabled="isEdit" :picker-options="{
                    disabledDate(time) {
                        return time.getTime() < Date.now();
                    }
                   }">
                </el-date-picker>

            </el-form-item>
            <el-form-item label="考勤类别" prop="day_type">
                <el-select v-model="formData.day_type" placeholder="请选择考勤类别">
                    <el-option v-for="item in dayTypeData" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
                <el-input type="textarea" placeholder="请输入备注" v-model="formData.remark" clearable resize="none"
                    maxlength="200" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter, State } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({
    name: "kqGzDateEdit",
    mixins: [mixinDialogForm]
})
export default class kqGzDateEdit extends Vue {
    @Action("kqDate/add") itemAdd: any;
    @Action("kqDate/edit") itemEdit: any;
    @Getter('kqGz/all') gzData: any;
    @State((state) => state.sharing.dayType) dayTypeData: any;

    editInit(data: any) {
        const me = this as any;
        data.day_type = data.day_type.toString();
        me.formData = Object.assign({}, me.formData, data);

    }
    // 表单数据
    formData: any = {
        gz_sn: "",
        day_type: "1",
        day_date: "",
        remark: ""
    };
    roledata: any = [];
    // 表单验证
    rules: any = {
        gz_sn: [
            {
                required: true,
                message: "请选择考勤规则"
            }
        ],
        day_type: [
            {
                required: true,
                message: "请选择考勤类别"
            }
        ],
        date_date: [
            {
                required: true,
                message: "请选择考勤日期"
            }
        ]
    };


    // 标题
    get title() {
        return (this as any).isEdit ? "编辑特殊日期" : "新增特殊日期";
    }

}
</script>